<!--
 * @Description: 健康数据页面
 * @Author: ZhangHan
 * @Date: 2025-08-04 10:38:15
 * @LastEditTime: 2025-09-16 08:52:14
 * @LastEditors: ZhangHan
-->
<template>
  <view class="healthContent">
    <view class="healthCard">
      <image class="picuser" :src="IMG_ALL.DUMMY" />
      <view class="leftInfo">
        <view class="top">
          <view> {{ data?.height ? `${data?.height}cm` : "-" }} </view>
          <view>身高</view>
        </view>
        <view class="bottom">
          <view> {{ data?.weight ? `${data?.weight}kg` : "-" }} </view>
          <view>体重</view></view
        >
      </view>
      <view class="rightInfo">
        <view class="top">
          <view>{{ data?.bmi ?? "-" }}</view>
          <view
            >BMI(
            <span :style="{ color: getBmiColor(data?.bmi)?.color }">{{
              getBmiColor(data?.bmi)?.text
            }}</span>
            )</view
          >
        </view>
        <view class="bottom">
          <view> {{ data?.waistline ? `${data?.waistline}cm` : "-" }} </view>
          <view>腰围</view></view
        >
      </view>
    </view>
    <!--  #ifdef H5 -->
    <component v-if="data?.bmi" :is="getCard(data?.bmi)" />
    <!--  #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <UnderWeightCard v-if="data?.bmi < 18.5" />
    <NormalCard v-else-if="data?.bmi >= 18.5 && data?.bmi < 24" />
    <OverWeightCard v-else-if="data?.bmi >= 24 && data?.bmi < 28" />
    <ObeseCard v-else-if="data?.bmi >= 28" />
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { IMG_ALL } from "@/concacts/imgPath";
import { getBmiColor } from "@/utils/common";
import NormalCard from "./components/NormalCard.vue";
import UnderWeightCard from "./components/UnderWeightCard.vue";
import OverWeightCard from "./components/OverWeightCard.vue";
import ObeseCard from "./components/ObeseCard.vue";

const data = ref<any>();

onLoad((options) => {
  data.value = JSON.parse(options?.data);
  if (data.value.height && data.value.weight) {
    const heightInMeters = data.value.height / 100;
    const bmi = data.value.weight / (heightInMeters * heightInMeters);
    data.value.bmi = bmi.toFixed(2);
  }
});

//根据bmi获取对应的card卡片
const getCard = (bmi: number) => {
  if (bmi < 18.5) {
    return UnderWeightCard;
  }
  if (bmi >= 18.5 && bmi < 24.0) {
    return NormalCard;
  }
  if (bmi >= 24.0 && bmi < 28.0) {
    return OverWeightCard;
  }

  if (bmi >= 28.0) {
    return ObeseCard;
  }
};
</script>

<style lang="scss" scoped>
@use "./index.scss";
</style>
